<template>
  <div class="Login">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
       <el-form-item label="账号" prop="username">
        <el-input
          type="username"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >登录</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return{
      ruleForm:{
        username:"",
        paddign:''
      },
      rules:{
        username:[
          {
            required:true,
            message:"账号不正确",
            trigger:"blur"
          }
        ],
        password:[
          {
            required:true,
            message:"密码不正确",
            trigger:"blur"
          }
        ]
      }
    }
  },
  methods:{
    submitForm(){
      this.$refs.ruleForm.validate(valid=>{
        if(valid){
          if(this.ruleForm.username==='123' && this.ruleForm.password==="123"){
            sessionStorage.setItem('username',this.ruleForm.username)
            this.$router.push({path:"/Housing"})
          }else{
            this.$alert("错误")
          }
        }
      })
    }
  }
};
</script>

<style>
.Login{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
